<template>
  <div class="layui-layout layui-layout-admin zlgj-page" >
    <div class="adminnav2">
     <Secondnav urlname="xiaoshou"></Secondnav>
    </div>
     <div class="viewport01"></div>
      <div class="layui-body kedou-admin" id="LAY_app_body">
        <div class="layui-fluid">
          <div class="layui-card">
            <div class="layui-card-header">今日支付金额（元）：</div>
            <div class="layui-card-body layuiadmin-card-list">
                <p class="layuiadmin-big-font number">
                  <i>0</i>
                  <i>0</i>
                  <i>0</i>
                  <i>0</i>
                  <i>0</i>
                  <i>0</i>
                  <i>0</i>
                  <i>0</i>
                  <i>0</i>
                  <i>0</i>
                </p>
                <p style="color:#fff;font-size:14px;">
                  累计支付金额：{{itemData.nearSales.cumulativeSales/1000000}}万元
                  <span class="layuiadmin-span-color">昨日支付金额： {{itemData.nearSales.yesterdaySales/100}}元</span>
                </p>
              </div>
          </div>
        </div>
        <div class="layui-fluid">
        	<div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
              <div class="layui-card">
                <div class="layui-card-header">实时订单</div>
                <div class="layui-card-body">
                  <div class="timelyContent" style="height:300px;overflow:hidden;font-size:12px;">
                  	<ul>
                      <li v-for='item in orderlist'>
                        <span>{{dotime(item.createAt)}}</span> {{item.accountName}}（{{item.mobile}}）下单，金额{{item.payAmount/100}}元
                      </li>


                  	</ul>
                  </div>
                </div>
              </div>
              <div class="layui-card">
                <div class="layui-card-header">周销售数据</div>
                <div class="layui-card-body">
                  <div id="xtb02" style="height:300px"></div>
                </div>
              </div>

            </div>
            <div class="layui-col-md4">
              <div class="layui-card">
                  <div class="layui-card-header">订单时间段比例</div>
                  <div class="layui-card-body">
                    <div id="xtb01" style="height:300px"></div>
                  </div>
              </div>
              <div class="layui-card">
                  <div class="layui-card-header">订单城市TOP5</div>
                  <div class="layui-card-body">
                    <div id="xtb02" class='order-top-main' style="height:300px">
                      <dl v-for="(item,index) in citylist">
                        <dt>TOP{{index}}&nbsp;&nbsp;{{item.cityName}}/{{item.counts}}单&nbsp;&nbsp;{{item.proportion}}%</dt>
                        <dd>
                          <span :style='"width:"+item.proportion+"%"'></span>
                        </dd>
                      </dl>
                      <!-- <dl>
                        <dt>TOP1&nbsp;&nbsp;北京市/1200单&nbsp;&nbsp;20%</dt>
                        <dd>
                          <span style="width:20%"></span>
                        </dd>
                      </dl>
                      <dl>
                        <dt>TOP1&nbsp;&nbsp;上海市/920单&nbsp;&nbsp;30%</dt>
                        <dd>
                          <span style="width:20%"></span>
                        </dd>
                      </dl>
                      <dl>
                        <dt>TOP1&nbsp;&nbsp;天津市/800单&nbsp;&nbsp;20%</dt>
                        <dd>
                          <span style="width:20%"></span>
                        </dd>
                      </dl>
                      <dl>
                        <dt>TOP1&nbsp;&nbsp;杭州市/1800单&nbsp;&nbsp;60%</dt>
                        <dd>
                          <span style="width:60%"></span>
                        </dd>
                      </dl> -->
                    </div>
                  </div>
              </div>
            </div>


          </div>
        </div>
  		</div>	　
  </div>
</template>
<script>
  import echarts from 'echarts'
  import Pagetop from '../common/pagetop.vue'
  import Secondnav from '../common/zlgjsecondnav.vue'
export default {
  name: 'kehu',
  components: {Pagetop,Secondnav},
  data () {
    return {
      itemData:{nearSales:''},
      orderlist:[],
      citylist:[]
    }
  },
  mounted(){
    this.getdate();
    this.getorder();

  },
  methods: {
    getorder:function(){
    	var url='/crmweb/aapi/v1.9/pedestrian-street/home/data';
    	var _this=this;
    	ajaxRequest(url,'GET','json','',function(ret,err){
        if(ret.data.realTimeOrderArrayVM.realTimeOrder){
          _this.orderlist=ret.data.realTimeOrderArrayVM.realTimeOrder;

        }
    	})
    },
    dotime:function(val){
      	return FormatDate(val);
      },
    getdate:function(){
    	var url='/crmweb/aapi/v1.9/pedestrian-street/sales/data';
    	var _this=this;
    	ajaxRequest(url,'GET','json','',function(ret,err){
    		_this.itemData=ret.data;
        _this.citylist=ret.data.cityRankTop.cityRank;
        var num=parseInt(ret.data.nearSales.todaySales/100);
        var monery=num.toString();
        for(var i=0;i<monery.length;i++){
        	$(".number i").eq(10-monery.length+i).text(monery[i]);
        }
      	_this.getxtb01();
      	_this.getxtb02();
    	})

    },
    getxtb01:function(){
      var res=this.itemData.periodProportion
      var dates=[{
      						count:res.morning,
      						periodAtStr: "上午"
      					}, {
      						count: res.afternoon,
      						periodAtStr: "中午"
      					}, {
      						count: res.noon,
      						periodAtStr: "下午"
      					}]


      var arr=[];
      for(var i=0;i<dates.length;i++){
      	var obj={};
      	obj.value=dates[i].count;
      	obj.name=dates[i].periodAtStr;
      	if(i==0){
      		obj.itemStyle={color:'#9ac200'}
      	}
      	else if(i==1){
      		obj.itemStyle={color:'#c00'}
      	}
      	else{
      		obj.itemStyle={color:'#ffac38'}
      	}
      	arr.push(obj)
      }
      var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },

          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '50%'],
                  data:arr,
                  label: {
                       normal: {
                            textStyle: {
                                  color: '#b0c5e4'
                            }
                       }
                  },
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('xtb01'));
      myChart.setOption(option)
    },
    getxtb02:function(){
      var res=this.itemData.salesVolume.salesVolumeReportList;
      var arr1=[]
      var arr2=[];
      var arr3=[];
      for(var i=0;i<res.length;i++){
      	var time=res[i].monthOrDay+'日';
      	arr1.push(time)
      	arr2.push(res[i].salesVolume/100)
        arr3.push(res[i].salesNumber)
      }
      var n = [{
        backgroundColor:'rgba(255, 255, 255, 0)',
      	title: {
      		text: "销售数据",
      		x: "left",
      		textStyle: {
      			fontSize: 14,
            color:"#b0c5e4"
      		}
      	},
      	tooltip: {
      		trigger: "axis"
      	},

      	legend: {
      		data: ["销售额", "销售量"],
          textStyle:{
              color:"#b0c5e4"
          }

      	},
      	xAxis:{
      		type: "category",
      		boundaryGap: !1,
      		data: arr1,
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
      	},
      	yAxis: {
      		type: "value",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
      	},
      	series: [{
      		name: "销售额",
      		type: "line",
      		smooth: !0,
      		itemStyle: {
      			normal: {
      				areaStyle: {
      					type: "default"
      				}
      			}
      		},
      		data:arr2
      	}, {
      		name: "销售量",
      		type: "line",
      		smooth: !0,
      		itemStyle: {
      			normal: {
      				areaStyle: {
      					type: "default"
      				}
      			}
      		},
      		data: arr3
      	}]
      }]
      var index=0;
      var option=n[index];
      let myChart = echarts.init(document.getElementById('xtb02'))
      myChart.setOption(option);
    },
  },
  updated:function(){

  },
}
</script>
<style>
 @import '../../../static/other/css/zlgj/index.css'
</style>
